<template>
  <div class="alarm-overview-main">
    <div class="main-title">
      <div>统计图表</div>
      <div class="main-title-right">
        <span
          :class="{ 'title-active': activeTitle == 1 }"
          @click="selectType(1)"
          >3天内</span
        >
        <el-divider direction="vertical"></el-divider>
        <span
          :class="{ 'title-active': activeTitle == 2 }"
          @click="selectType(2)"
          >本周</span
        >
        <el-divider direction="vertical"></el-divider>
        <span
          :class="{ 'title-active': activeTitle == 3 }"
          @click="selectType(3)"
          >本月</span
        >
      </div>
    </div>
    <div class="title-class">
      <span :class="{ 'type-active': isShow }" @click="handleTitle(true)"
        >统一告警 &nbsp;|&nbsp;</span
      ><span
        :class="{ 'type-active': !isShow }"
        @click="handleTitle(false)"
        >告警分级</span
      >
    </div>
    <template v-if="isShow">
      <pie-chart
        :xData="alarmTotal"
        :yData="alarmTotal"
        ref="alarm"
      ></pie-chart>
    </template>
    <template v-else>
      <pie-chart
        :xData="alarmLevelTotal"
        :yData="alarmLevelTotal"
        ref="alarmLevel"
      ></pie-chart>
    </template>
  </div>
</template>

<script>
import { getAlarmTotal, getAlarmLevelTotal } from "@/api/home/alarm.js";
import PieChart from "./PieChart.vue";
export default {
  components: {
    PieChart,
  },
  data() {
    return {
      activeTitle: "",
      loading: false,
      isShow: true,
      alarmLevelTotal: [],
      alarmTotal: [],
    };
  },
  filters: {},
  methods: {
    selectType(type) {
      this.activeTitle = type;
      if (this.isShow) {
        this.getAlarmTotal();
      } else {
        this.getAlarmLevelTotal();
      }
    },
    handleTitle(flag) {
      this.isShow = flag;
      if (flag) {
        this.getAlarmTotal();
      } else {
        this.getAlarmLevelTotal();
      }
    },
    async getAlarmLevelTotal() {
      const result = await getAlarmLevelTotal({
        date: this.activeTitle,
      });
      this.alarmLevelTotal = result.data.map((item) => {
        return {
          name: item.alarmLevelName,
          value: item.total,
        };
      });
      this.$nextTick(() => {
        this.$refs.alarmLevel.initChart("alarmLevel");
      });
    },
    async getAlarmTotal() {
      const result = await getAlarmTotal({
          date: this.activeTitle,
      });
      this.alarmTotal = result.data.map((item) => {
        return {
          name: item.monitorSrc,
          value: item.total,
        };
      });
      this.$nextTick(() => {
        this.$refs.alarm.initChart("alarm");
      });
    },
  },
  mounted() {
    this.getAlarmTotal();
  },
};
</script>

<style lang="scss" scoped>
.alarm-overview-main {
  height: 100%;
  .chart {
    height: calc(100% - 20px) !important;
  }
}
.title-active {
  color: #eff2fe;
}
.alarm-description {
  flex: 1;
}
</style>